<template>
  <div>
    <h1>
      拖动demo
    </h1>
    <p>
      延时开始
    </p>

    <div class="card">

    </div>
  </div>
</template>

<script>
export default {
  name: "mouse",
  mounted() {
    // 先获取card的DOM
    console.log('注册事件')
    let card = document.querySelector('.card')

    card.onmousedown = (e) => {
      let x = e.pageX - card.offsetLeft;
      let y = e.pageY - card.offsetTop;
      console.log('开始mouse', x, y);
      window.onmousemove = (e) => {
        const cx = e.pageX - x;
        const cy = e.pageY - y;
        card.style.left = cx + 'px';
        card.style.top = cy + 'px';
        // console.log('移动了move', cx, cy)

      }
      window.onmouseup =  ()=> {
        console.log('移动了enter')
        window.onmousemove = null
        // window.onmouseup = null
      }
    }


  }
}
</script>

<style scoped>
.card {
  background-color: #29a4f6;
  width: 20px;
  position: absolute;
  height: 20px;
}
</style>